<template>
  <div id="reserve">
    <tab :scroll-threshold="5" custom-bar-width="0">
      <tab-item selected>{{time[0]}}</tab-item>
      <tab-item>{{time[1]}}</tab-item>
      <tab-item @click.native="showPopup = true">{{select}}</tab-item>
      <tab-item>
        img
      </tab-item>
      <tab-item>筛选</tab-item>
    </tab>
    <panel class="content" :list="list">
    </panel>
    <scroller lock-y scrollbar-x :bounce=false>
      <div class="box1">
        <div class="box1-item" v-for="i in 24" :key="i">
          <divider class="time-block">今天{{i-1}}:00</divider>
          <flexbox :gutter="4">
            <flexbox-item class="child" v-for="(item,index) in timeList" :key="index"><div>{{item.type}}</div></flexbox-item>
          </flexbox>
        </div>
      </div>
    </scroller>
    <div v-transfer-dom>
      <popup v-model="showPopup">
        <datetime-view v-model="select"></datetime-view>
      </popup>
    </div>
  </div>
</template>

<style lang='less'>
  #reserve {
    .time-block {
      color: #52627e;
    }
    .check {
      width: 25%;
      box-sizing: border-box;
    }
    .content {
      color: #52627e;
      p {
        padding-bottom: 0.2rem;
        span {
          font-size: 0.5rem;
          margin-left: 1.2rem;
        }
      }
    }
    .box1-item {
      width: 200px;
      height: 4rem;
      display: inline-block;
      margin-left: 5px;
      float: left;
      text-align: center;
      line-height: 4rem;
      .child {
        height: 1.5rem;
        line-height: 1.5rem;
        border: 1px solid #00D7C7;
        color: #00D7C7;
        text-align: center;
        border-radius: 0.3rem;
      }
    }
    .box1 {
      height: 4rem;
      position: relative;
      width: 5200px;
    }
    .inform-more {
      text-align: center;
    }
  }
</style>

<script>
  import {
    XInput,
    Group,
    XButton,
    Panel,
    DatetimeView,
    TransferDom,
    Popup,
    Flexbox,
    FlexboxItem,
    Tab,
    TabItem,
    Checker,
    CheckerItem,
    Divider,
    Scroller
  }

  from "vux";
  export default {
    name: "Login",
    type: '1',
    components: {
      XInput,
      XButton,
      Group,
      Panel,
      DatetimeView,
      Popup,
      Flexbox,
      FlexboxItem,
      Tab,
      TabItem,
      Checker,
      CheckerItem,
      Divider,
      Scroller
    },
    directives: {
      TransferDom
    },
    computed: {
      time() {
        var mydate = new Date();
        var month = mydate.getMonth() + 1;
        var day = mydate.getDate();
        if(month < 10) {
          month = "0" + month
        }
        if(day < 10) {
          day = "0" + day
        }
        var day3 = new Date();
        day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000);
        var ymonth = day3.getMonth() + 1;
        var yday = day3.getDate();
        if(ymonth < 10) {
          ymonth = "0" + ymonth
        }
        if(yday < 10) {
          yday = "0" + yday
        }
        var myarry = [];
        myarry[0] = month + "-" + day;
        myarry[1] = ymonth + "-" + yday;
        return myarry;
      }
    },
    data() {
      return {
        list: [{
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '<p>演示会议室<span>坐席20人</span></p>',
          desc: '<p>如何使用请查看会议室预约教程</p><p>会议室地点：如何使用请查看会议预约教程</p>',
          url: '',
          show: false
        }],
        value1: '2017-10-11',
        value2: '2017-10-24',
        showPopup: false,
        format: 'YYYY-MM-DD',
        select: '选择',
        timeList: [{
          show: false,
          type: "空闲",
          value: 1
        }, {
          show: false,
          type: "空闲",
          value: 2
        }, {
          show: false,
          type: "空闲",
          value: 3
        }, {
          show: false,
          type: "空闲",
          value: 4
        }]
      }
    },
    methods: {}
  };
</script>
